import React, { Component } from 'react'
import { Button } from 'antd'
import { SchemaForm, Item, Submit, Layout, SchemaType } from '@amazebird/antd-schema-form'

const data = {
  students: [['王大仙', '王二狗', '王富贵'], ['张三', '李四'], ['李隆基', '张三疯']]
}

const schema: SchemaType = {
  students: {
    type: 'array',
    item: {
      label: ({ index }) => {
        return `班级${index + 1}`
      },
      type: 'array',
      item: {
        label: ({ index }) => {
          return `学生${index + 1}`
        },
        component: 'Input'
      }
    }
  }
}

function DyadicArrayDemo() {
  const onFinish = (formdata) => {
    console.info(formdata)
  }

  return (
    <SchemaForm schema={schema} initialValues={data}>
      <Item field="students">
        {(fields, { add, remove: removeClass }) => {
          return (
            <>
              {
                fields.map((arrayInfo) => {
                  return (
                    <Item {...arrayInfo}>
                      {(fields, { add, remove }) => {
                        return (
                          <>
                            {
                              fields.map((studentArrayInfo) => {
                                return (
                                  <div style={{ display: 'flex', marginBottom: 8, alignItems: 'baseline' }} key={studentArrayInfo.key}>
                                    <Item {...studentArrayInfo} />
                                    <Button onClick={() => remove(studentArrayInfo.name)}>删除学生</Button>
                                  </div>
                                )
                              })
                            }
                            <Button onClick={() => add()}>添加学生</Button>
                            <Button onClick={() => removeClass(arrayInfo.name)}>删除班级</Button>
                          </>
                        )
                      }}
                    </Item>
                  )
                })
              }
              <Layout offset={8}>
                <Button onClick={() => add()}>添加班级</Button>
              </Layout>
            </>
          )
        }}
      </Item>
      <div style={{ marginTop: 20 }}>
        <Layout offset={8}>
          <Submit type="primary" onFinish={onFinish} >保存</Submit>
        </Layout>
      </div>

    </SchemaForm>
  )
}

export default DyadicArrayDemo
